<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="made with love by dartdoc 0.24.1">
  <meta name="description" content="keyboard_avoider API docs, for the Dart programming language.">
  <title>keyboard_avoider - Dart API docs</title>

  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500,400i,400,300|Source+Sans+Pro:400,300,700" rel="stylesheet">
  <link rel="stylesheet" href="static-assets/github.css">
  <link rel="stylesheet" href="static-assets/styles.css">
  <link rel="icon" href="static-assets/favicon.png">

</head>

<body>

<div id="overlay-under-drawer"></div>

<header id="title">
  <ol class="breadcrumbs gt-separated dark hidden-xs">
    <li><a href="https://github.com/vgventures/keyboard-avoider">keyboard_avoider package</a></li>
  </ol>
  <div class="self-name">keyboard_avoider</div>
  <form class="search navbar-right" role="search">
    <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
  </form>
</header>

<main>

  <div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
    <h5><span class="package-name">keyboard_avoider</span> <span class="package-kind">package</span></h5>
    <ol>
          <li class="section-title">Libraries</li>
          <li><a href="keyboard_avoider/keyboard_avoider-library.html">keyboard_avoider</a></li>
    </ol>
  </div>

  <div class="col-xs-12 col-sm-9 col-md-8 main-content">
      <section class="desc markdown">
        <h1 id="keyboard_avoider">keyboard_avoider</h1>
<p>A lightweight alternative to the <code>Scaffold</code> widget for avoiding the on-screen software keyboard. Automatically scrolls obscured <code>TextField</code> child widgets into view on focus.</p>
<p><img alt="" src="../../keyboard_avoider.gif"></p>
<p>In the video above, every colored area is embedded in its own <code>KeyboardAvoider</code>.</p>
<h2 id="example">Example</h2>
<pre class="language-dart"><code>import 'package:keyboard_avoider/keyboard_avoider.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardAvoider(
      child: Placeholder(),
    );
  }
}
</code></pre>
<h2 id="why-not-use-a-scaffold">Why not use a Scaffold?</h2>
<p>The <code>Scaffold</code> widget expects to be a full-screen widget. If the <code>resizeToAvoidBottomPadding</code> property is set to <code>true</code> (which is the default), it will adjust its bottom <code>padding</code> by the full height of the on-screen keyboard when it appears. In contrast, the <code>KeyboardAvoider</code> widget only insets its bottom <code>padding</code> by the actual amount obscured by the keyboard. This is especially useful when working with complex layouts on tablet devices.</p>
<h2 id="auto-scroll">Auto Scroll</h2>
<p>To auto-scroll to a focused widget such as a <code>TextField</code>, set the <code>autoScroll</code> property to <code>true</code>. If <code>child</code> is not a <code>ScrollView</code>, it is automatically embedded in a <code>SingleChildScrollView</code> to make it scrollable.</p>
      </section>
      
        <section class="summary">
            <h2>Libraries</h2>
          <dl>
            <dt id="keyboard_avoider">
              <span class="name"><a href="keyboard_avoider/keyboard_avoider-library.html">keyboard_avoider</a></span> 
            </dt>
            <dd>
              
            </dd>          </dl>
        </section>

  </div> <!-- /.main-content -->

</main>

<footer>
  <span class="no-break">
    keyboard_avoider 0.0.1
  </span>

</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="static-assets/typeahead.bundle.min.js"></script>
<script src="static-assets/highlight.pack.js"></script>
<script src="static-assets/URI.js"></script>
<script src="static-assets/script.js"></script>


</body>

</html>
